<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<!-- 自定义事件 -->
		<div id="app">
			<parent></parent>
		</div>
		<template id="p">
			<div>
				<h5>父组件</h5>
				<h3>{{name}}</h3>
				<h5 style="color: orange;">这是子传父的数据:{{fromC}}</h5>
				<child @ctop="getDataFromC"></child>
			</div>
		</template>
		<template id="c">
			<div>
				<hr />
				<h5>子组件</h5>
				<h3>{{name}}</h3>
				<button @click="toP">子传父</button>
			</div>
		</template>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				components: {
					parent: { //父组件
						template: '#p',
						methods: {
							getDataFromC(c) {
								console.log(c);
								this.fromC = c;
							}
						},
						data() {
							return {
								fromC: '',
								name: '张三',
								stus: {
									id: 6,
									name: 'VUE',
									salary: 999
								}
							}
						},
						components: {
							child: { //子组件
								template: '#c',
								data() {
									return {
										name: '张三三'
									}
								},
								methods: {
									toP() {
										//触发当前实例上的事件 vm.$emit( eventName, […args] )
										//参数1
										this.$emit('ctop', this.name);
									}
								},
							}
						}
					}
				},
			})
		</script>
	</body>
</html>
